@import "var.scss";

/* 
    全局定义原则：
        1：常用、多个样式的组合
        2：多个元素的同一/同组样式
        3：第三方组件统一样式定义
        4：... （补充） ...
        
    // @mixin 在整个样式表中重复使用的样式
    // @include 指令可用于包含一混入
*/

/* 上下左右居中 */

@mixin layout($justify-content: flex-start, $align-items: stretch, $flex-direction: row, $flex-wrap: nowrap) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-direction: $flex-direction;
    flex-wrap: $flex-wrap;
}

/* 图标 */
@mixin icon($size: 1.5em, $color: $color-black) {
    width: $size;
    height: $size;
    font-size: $size;
    color: $color;
    fill: currentColor;
    overflow: hidden;
    position: relative;
}

/* margin && padding */
@mixin mp-size($ms: 0 0 0 0, $ps: 0 0 0 0) {
    margin: $ms  !important;
    padding: $ps  !important;
}

/* width && height */
@mixin wh-size($wsize: 100%, $hsize: 100%) {
    width: $wsize;
    height: $hsize;
}

/* border */
/* 边框宽度 | 边框样式 | 边框颜色 */
@mixin border-style($bwidth: medium, $bstyle: solid, $bcolor: #E6E6E6, $bradius: 3px) {
    border: $bwidth $bstyle $bcolor;
    border-radius: $bradius;
}


/* 超出省略 */
@mixin ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* 可变参数示例  */
// @include margin(0px 4px 5px #666, 2px 6px 10px #999);
@mixin margin($size...) {
    margin: $size;
    padding: $size;
}

/* 滚动条样式 */
/* 跟element-plus中table横向得滚动条冲突，原因不明 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}


* {
    box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
    margin: 0;
    padding: 0;
}


del,
ins,
u,
s,
a,
a:hover {
    text-decoration: none;
}

// body,
// textarea,
// input,
// button,
// select,
// keygen,
// legend {
//     font-family: "\5FAE\8F6F\96C5\9ED1", arial, \5b8b\4f53;
//     line-height: 1.2em;
//     font-size: 14px;
//     color: #333333;
//     outline: 0;
// }

// .clearfix {
//     display: block;
//     height: 0;
//     line-height: 0;
//     clear: both;
// }

// .clearfix-after::after {
//     content: '';
//     display: block;
//     height: 0;
//     line-height: 0;
//     clear: both;
// }

// .clearfix-before::before {
//     content: '';
//     display: block;
//     height: 0;
//     line-height: 0;
//     clear: both;
// }


/* 隐藏溢出 */

.ofh {
    overflow: hidden;
}


.table-img:hover {
    background-color: #ddd;
    border-radius: 5px;
    /* left: 0.1em; */
    /* width: 20px;
    height: 20px; */
}

.el-message-box__btns {
    display: flex;
    flex-direction: row-reverse;
}

.el-message-box__btns button:nth-child(1) {
    margin-left: 10px;
}

/* 鼠标变成小手 */
.pointer:hover {
    cursor: pointer;
}

/* 旋转动画 */

.rotateme {
    animation: rotateme 4s infinite linear;
}

@keyframes rotateme {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

/* 禁止用户选中 */

.noselect,
.noselect * {
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
}

//提示框最大长度设置为50%
.el-popper {
    max-width: 40% !important;
}